// 使用redux管理登录-token
// token:用户的唯一标识数据   多个组件共享   redux就是解决状态共享问题
// token的异步获取action   同步修改reducer

import { createSlice } from "@reduxjs/toolkit";
import { request, setToken as _setToken, getToken,removeToken } from "@/utils";

const userStore = createSlice({
  name: "userStore",
  // 数据状态
  initialState: {
    // redux存入token后刷新浏览器  token会丢失,也就是恢复为初始状态，（持久化就是防止刷新时会丢失token）
    //造成原因： redux是基于浏览器内存的存储方式，刷新时状态恢复为初始值
    // 获取并存token   redux +  localStorage  都存
    // 初始化token  localStorage ? localStorage :""
    // token: localStorage.getItem("token_key") || "",
    token: getToken() || "",
    userInfo:{

    }
    
  },
  reducers: {
    // 同步修改
    setToken(state, action) {
      state.token = action.payload;
      // localStorage.setItem("token_key", action.payload);
      _setToken(action.payload);
    },
    setUserInfo(state,action){
      state.userInfo = action.payload

    },
    // 清除token 和个人信息
    clearUserInfo(state){
      removeToken()
      state.token = ""
      state.userInfo = {}
    }
  },
});

// 触发actionCreator
// 解构reducers里面的函数
const { setToken,setUserInfo ,clearUserInfo} = userStore.actions;

// 写异步逻辑  完成登录获取token
const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    // 1.发送请求
    const res = await request.post("/authorizations", loginForm);
    //  2.提交同步action(reducers里面的同步方法) 进行token的存入
    dispatch(setToken(res.data.token));
  };
};
 
// 用户个人信息异步逻辑
const fetchUserInfo = ()=>{
  return async(dispatch)=>{
    const res = await request.get("/user/profile")
    dispatch(setUserInfo(res.data))

  }
}
 

export { setToken, fetchLogin ,fetchUserInfo,clearUserInfo};
// 获取reducer函数
const userReducer = userStore.reducer;
export default userReducer;
